<!DOCTYPE html>
<html>
<head>
	<title>商品详情</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Best Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
	Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<script type="application/x-javascript"> 
		addEventListener("load", function() { 
			setTimeout(hideURLbar, 0); }, false);
			function hideURLbar(){ window.scrollTo(0,1); 
			} 
	</script>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<script src="js/jquery.min.js"></script>
	<script src="js/simpleCart.min.js"> </script>
	<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
	<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
	<link href="css/animate.min.css" rel="stylesheet"> 
	<script src="js/wow.min.js"></script>
	<script>
	 new WOW().init();
	</script>
	<style type="text/css">
			.nav{
				width: 100%;
				height: 50px;
				background:url("./images/repeat.png") repeat-x 0px 0px}/*宽度、高度、背景*/
			.nav ul li{
				width: 100px; 
				float: left; /*左边浮动*/
				line-height: 50px; /*行高*/
				margin-left: 40px;/*左侧距离*/
			}
			.nav ul li a{
				color: #fff;
				text-decoration: none;/*下划线*/
				line-height: 50px;
				font-size: 18px;
				font-weight: bold; /*字体加粗*/
				text-align: center;/*居中*/
				width: 100px;
				height: 50px;
				display:block; /*块状显示*/
			}
			.nav ul li a:hover{
				color: blue;
				background-color: #fff;/*背景颜色*/
			}
	</style>
</head>
	
<body>
	<!-- 头部开始 -->
	<div class="header">
		<div class="container">
			<div class="logo-nav">				
				<div class="logo-nav-left1">
					
					<!-- 导航栏开始 --> 
					<div class="nav">
						<ul>
							<li><a href="#">首页</a></li>
							<li><a href="#">商品展示</a></li>
							<li><a href="#">站内新闻</a></li>
							<li><a href="#">在线答疑</a></li>
							<li><a href="#">联系我们</a></li>
							<li><a href="#">在线帮助</a></li>
						</ul>
					</div>					
				</div>				
				<!-- 导航栏结束 -->
				
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- 头部结束 -->

	<!-- 位置导航开始 -->
	<div class="breadcrumbs">
		<div class="container">
			<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
				<li><span class="glyphicon glyphicon-home" aria-hidden="true"></span>商城首页</li>
				<li class="active">商品详情</li>
			</ol>
		</div>
	</div>
	<!-- 位置导航结束 -->

	<!-- 商品详情开始 -->
	<div class="single" style="background: #fff;">
		<div class="container">
			<!-- 左侧栏开始 -->
			<div class="col-md-4 products-left" style="margin-top:-44px;">
				<!-- 商品目录开始 -->
				<div class="categories animated wow slideInUp" data-wow-delay=".5s">
					<h3>商品目录</h3>
					<ul class="cate">
						<li><a href="products.html">热卖商品</a> <span>(10)</span></li>
						<li><a href="products.html">相机/摄像机</a> <span>(12)</span></li>
							<ul>
								<li><a href="products.html">佳能</a> <span>(10)</span></li>
								<li><a href="products.html">尼康</a> <span>(5)</span></li>
								<li><a href="products.html">松下</a> <span>(8)</span></li>
							</ul>
						<li><a href="products.html">智能设备</a> <span>(20)</span></li>
							<ul>
								<li><a href="products.html">智能手环</a> <span>(5)</span></li>
								<li><a href="products.html">智能手表</a> <span>(5)</span></li>
								<li><a href="products.html">VR眼镜</a> <span>(6)</span></li>
								<li><a href="products.html">体感设备</a> <span>(1)</span></li>
							</ul>
					</ul>
				</div>
				<!-- 商品目录结束 -->
				<!-- 左侧栏 -->
				<div class="men-position animated wow slideInUp" data-wow-delay=".5s">
					<a href="single.html"><img src="images/29.jpg" alt=" " class="img-responsive" /></a>
					<div class="men-position-pos" >
						<h4>四月<br>销量排行</h4>
						<h5>智能设备<span style="font-size: 2em;">6</span>折起</h5>
					</div>
				</div>
			</div>
			<!-- 左侧栏结束 -->
			<!-- 幻灯片浏览框+放大镜 -->
			<div class="col-md-8 single-right">
				<div class="col-md-5 single-right-left animated wow slideInUp" data-wow-delay=".5s">
					<div class="flexslider">
						<ul class="slides">
							<li data-thumb="images/si.jpg">
								<div class="thumb-image"> <img src="images/si.jpg" data-imagezoom="true" class="img-responsive"> 
								</div>
							</li>
							<li data-thumb="images/si1.jpg">
								 <div class="thumb-image"> <img src="images/si1.jpg" data-imagezoom="true" class="img-responsive"> </div>
							</li>
							<li data-thumb="images/si2.jpg">
							   <div class="thumb-image"> <img src="images/si2.jpg" data-imagezoom="true" class="img-responsive"> 
							   </div>
							</li> 
						</ul>
					</div>
					<script defer src="js/jquery.flexslider.js"></script>
					<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
					<script>
						$(window).load(function() {
						  $('.flexslider').flexslider({
							animation: "slide",
							controlNav: "thumbnails"
						  });
						});
					</script>
				</div>
				<!-- 商品详情主体开始 -->
				<div class="col-md-7 single-right-left simpleCart_shelfItem animated wow slideInRight" data-wow-delay=".5s">
					<h3>尼康 D610 机身 入门全画幅 单反相机</h3>
					<h4><span class="item_price" style="font-size: 1.6em;">¥1999</span>&nbsp;<span class="item_price" style="font-size: .6em;"> 约2,426万有效像素 39点自动对焦 轻巧机身限时秒杀</span></h4>
					<div class="rating">
						<div class="rating-left">
							<img src="images/2.png" alt=" " class="img-responsive">
						</div>
						<div class="rating-left">
							<img src="images/2.png" alt=" " class="img-responsive">
						</div>
						<div class="rating-left">
							<img src="images/2.png" alt=" " class="img-responsive">
						</div>
						<div class="rating-left">
							<img src="images/2.png" alt=" " class="img-responsive">
						</div>
						<div class="rating-left">
							<img src="images/2.png" alt=" " class="img-responsive">
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="description">
						<p>PLUS会员专享价 银牌及以上用户开通PLUS可享限时特惠<br/><br/>重  量：	1.93kg<br/>品  牌： Nikon</p>
					</div>
					<div class="color-quality">
						<div class="color-quality-left">
							<h5>颜色： </h5>
							<ul>
								<li style="margin-right: 20px;"><a href="#" class="white"><span></span>经典黑</a></li>
								<li style="margin-right: 20px;"><a href="#" class="blue"><span></span>电眼蓝</a></li>
								<li><a href="#" class="red"><span></span>诱惑红</a></li>
							</ul>
						</div>
						<div class="color-quality-right">
							<h5>白条分期 :</h5>
							<select id="country1" onchange="change_country(this.value)" class="frm-field required sect">
								<option value="null">不分期</option>
								<option value="null">¥1629.33×3期 </option> 
								<option value="null">¥814.67×6期</option>					
								<option value="null">¥470.33×12期</option>	
								<option value="null">¥215.89×24期</option>							
							</select>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="occasion-cart" style="margin-top:35px;margin-bottom:35px; ">
						<a class="item_add" href="#">添加到购物车 </a>
					</div>
					<div class="social">
						<div class="social-left">
							<p>分享/收藏 :</p>
						</div>						
						<div class="clearfix"> </div>
					</div>
				</div>
				<!-- 商品详情主体结束 -->
				<!-- 商品详情导航栏开始 -->
				<div class="clearfix"> </div>
				<div class="bootstrap-tab animated wow slideInUp" data-wow-delay=".5s">
					<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
						<ul id="myTab" class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active">
								<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">商品介绍
								</a>
							</li>
							<li role="presentation" class="dropdown">
								<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">规格与包装 <span class="caret"></span>
								</a>
								<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
									<li>
										<a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">基本信息
										</a>
									</li>
									<li>
										<a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">包装清单
										</a>
									</li>
								</ul>
							</li>
							<li role="presentation">
								<a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">评价(0)
								</a>
							</li>
						</ul>
						<div id="myTabContent" class="tab-content">
							<!-- 商品介绍 -->
							<div role="tabpanel" class="tab-pane fade in active bootstrap-tab-text" id="home" aria-labelledby="home-tab">
								<p>本产品全国联保，享受三包服务，质保期为：1年质保如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！
									(注:如厂家在商品介绍中有售后保障的说明,则此商品按照厂家说明执行售后保障服务。) 您可以查询本品牌在各地售后服务中心的联系方式
									<span>平台卖家销售并发货的商品，由平台卖家提供发票和相应的售后服务。请您放心购买！</span></p>
							</div>
							
							<!-- 商品评论 -->
							<div role="tabpanel" class="tab-pane fade bootstrap-tab-text" id="profile" aria-labelledby="profile-tab">
								<div class="bootstrap-tab-text-grids">
									<p>暂无评论</p>
									<div class="add-review">
										<h4>添加评论</h4>
										<div class="rating1">
											<span class="starRating">
												<input id="rating5" type="radio" name="rating" value="5">
												<label for="rating5">5</label>
												<input id="rating4" type="radio" name="rating" value="4">
												<label for="rating4">4</label>
												<input id="rating3" type="radio" name="rating" value="3" checked>
												<label for="rating3">3</label>
												<input id="rating2" type="radio" name="rating" value="2">
												<label for="rating2">2</label>
												<input id="rating1" type="radio" name="rating" value="1">
												<label for="rating1">1</label>
											</span>
										</div>
										<form>
											<input type="text" placeholder="主题" onfocus="this.value = '';" onblur="if (this.value == '')" required="">
											<textarea type="text"  placeholder="正文" onfocus="this.value = '';" onblur="if (this.value == '')" required="" style="margin-top: 20px;"></textarea>
											<input type="submit" value="提交评论" >
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
			<!-- 商品详情导航栏结束 -->
		</div>
	</div>
	<!-- 商品详情结束 -->
	<!-- 相关商品开始 -->
	<div class="single-related-products">
		<div class="container">
			<!-- 大标题 -->
			<h3 class="animated wow slideInUp" data-wow-delay=".5s">相关商品</h3>
			<p class="est animated wow slideInUp" data-wow-delay=".5s">购买该商品的人还购买了……</p>
			<div class="new-collections-grids">
				<!-- 从左至右四块 -->
				<!-- 1开始 -->
				<div class="col-md-3 new-collections-grid">
					<div class="new-collections-grid1 animated wow slideInLeft" data-wow-delay=".5s">
						<div class="new-collections-grid1-image">
							<img src="images/9.jpg" alt=" " class="img-responsive" />
							<div class="new-collections-grid1-image-pos">
								<h4>查看详情</h4>
							</div>									
						</div>								
					</div>
				</div>
				<!-- 1结束 -->
				<!-- 2开始 -->
				<div class="col-md-6 new-collections-grid">
					<div class="new-collections-grid1-sub">
						<div class="new-collections-grid1 animated wow slideInLeft" data-wow-delay=".6s">
							<div class="new-collections-grid1-image">
								<img src="images/7.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos">
									<h4></h4>>查看详情</h4>
								</div>								
							</div>							
						</div>
					</div>
					<!-- 2结束 -->
					<!-- 3开始 -->
					<div class="new-collections-grid1-sub">
						<div class="new-collections-grid1 animated wow slideInLeft" data-wow-delay=".7s">
							<div class="new-collections-grid1-image">
								<img src="images/10.jpg" alt=" " class="img-responsive">
								<div class="new-collections-grid1-image-pos">
									<h4>查看详情</h4>
								</div>								
							</div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<!-- 3结束 -->
				<!-- 4开始 -->
				<div class="col-md-3 new-collections-grid">
					<div class="new-collections-grid1 animated wow slideInLeft" data-wow-delay=".8s">
						<div class="new-collections-grid1-image">
							<a href="single.html" class="product-image"><img src="images/6.jpg" alt=" " class="img-responsive"></a>
							<div class="new-collections-grid1-image-pos">
								<a href="single.html">查看详情</a>
							</div>							
						</div>						
					</div>
				</div>
				<!-- 4结束 -->
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- 相关商品结束 -->
	<!-- 页脚开始 -->
	
	<footer>
        <p class="text-center">&copy; Company 2018</p>
    </footer>
	<!-- 页脚结束 -->
	
</body>
</html>